<template>
  <div class="container">
    <div class="btnDiv">
      <button v-if="!userInfo.nickName" open-type = "getUserInfo" @click = "handleGetUserInfo" class="btnClass"> 授权 </button>    
    </div>
    <div v-if="isShow">
      <div class="note">{{ msg }}</div>
      <div class="divClass">
        <div class="userinfo">
        <img class="userinfo-avatar" :src="userInfo.avatarUrl" alt="ava">
        <div v-if="isTag" class="divTag">发起者</div>
        <p class="userinfo-nickname">{{userInfo.nickName}}</p>
        </div>
      </div>
      <div class="btnDiv">
        <button class="btnClass" @click="bindViewTap">放弃</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '等待对手加入.',
      timer: '',
      userInfo: {},
      // 是否打上房主标签
      isTag: true,
      isShow: false
    }
  },
  mounted () {
    this.timer = setInterval(() => {
      this.msg += '.'
      if (this.msg === '等待对手加入....') {
        this.msg = '等待对手加入.'
      }
    }, 1000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer)
    })
  },

  methods: {
    bindViewTap () {
      wx.showModal({
        title: '提示',
        content: '确认放弃对战？',
        confirmText: '放弃',
        cancelText: '取消',
        success: function (res) {
          console.log(res)
          if (res.confirm) {
            console.log('用户放弃对战')
            // 提供url，退回主界面
            wx.navigateTo({
              url: '../test/main'
            })
          } else {
            console.log('用户取消放弃对战')
            // 留在当前界面
          }
        }
      })
    },
    handleGetUserInfo () {
      wx.getUserInfo({
        success: (data) => {
          console.log(data)
          this.userInfo = data.userInfo
          this.isShow = true
        },
        fail: () => {
          console.log('获取失败')
        }
      })
    },
    getUserInfo (data) {
      console.log(data)
      if (data.mp.detail.rawData) {
        this.handleGetUserInfo()
      }
    }
  }
}
</script>

<style scoped>
.divTag {
  width: 50px;
  height: 20px;
  background-color:#39b54a;
  margin: 0 auto;
  font-size: 15px;
  color: white;
  text-align: center;
}

.note {
  color: white;
  text-align: center;
  padding: 40px 0px 30px 0px;
  letter-spacing: 3px;
  font: 25px FZYaoti,KaiTi;
  /* text-shadow: 0.1em 0.1em #999; */
} 
.btnDiv {
  padding: 100px 80px 0px 80px;
}

.btnClass {
  border-radius: 30px;
  box-shadow: 0 9px #999;
  font-family: YouYuan;
}

.btnClass:hover {
  background-color: aliceblue;
}

.btnClass:active {
  background-color: aliceblue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.divClass {
  /* background-color: rgb(180, 146, 83); */
  width: 70px;
  height: 100px;
  margin:0 auto;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
  font-size: 20px;
}
</style>